<template>
  <f7-page>
    <f7-navbar title="签名手写板"  back-link="Back">    </f7-navbar>

    <f7-block>
      <f7-row>
        <f7-col>
          <div class="js-signature"
               data-width="200"
               data-height="200"
               data-border="1px solid #1ABC9C"
               data-background="#aaa"
               data-line-color= '#FF0000'
               data-auto-fit="true"></div>
        </f7-col>
      </f7-row>
      <f7-row>
        <f7-col width="50">
          <f7-button  fill  @click="clearCanvas();">清空</f7-button>
        </f7-col>
        <f7-col width="50" >
          <f7-button fill @click="saveSignature();"  v-bind:active="saveState">保存</f7-button>
        </f7-col>
      </f7-row>
    </f7-block>
  </f7-page>

</template>

<script>
    import 'jq-signature'

    export default {
      name: "admitSignature",
      data() {
        return {
          saveState:false,
        }
      },
      mounted () {

        $('.js-signature').jqSignature();
        $('.js-signature').on('jq.signature.changed', function() {
          let that = this;
          that.saveState = true;
          console.log("that.saveState = true; " + that.saveState)
        });
      },
      methods:{
        clearCanvas : function () {
          $('#signature').html('<p><em>Your signature will appear here when you click "Save Signature"</em></p>');
          $('.js-signature').jqSignature('clearCanvas');
          let that = this;
          that.saveState = false;
        },
        saveSignature: function () {
          $('#signature').empty();
          let dataUrl = $('.js-signature').jqSignature('getDataURL');
          // let img = $('<img>').attr('src', dataUrl);
          // $('#signature').append($('<p>').text("Here's your signature:"));
          // $('#signature').append(img);
          let that = this;
          that.$f7.data.admitSig = dataUrl;
          that.$f7router.back();
        }
      }
    }
</script>


<style scoped>
.preCss{
  margin-top: 10px;
}
</style>
